<template>
	<div class="bg-[#f7f8fa] pb-[30px]">
		<!-- 轮播图 -->
		<van-swipe :autoplay="3000" lazy-render :height="200">
			<van-swipe-item v-for="image in images" :key="image.id">
				<img :src="image.url" class="h-[100%] w-[100%]" />
			</van-swipe-item>
		</van-swipe>
		<!-- 广告 -->
		<van-image width="100%" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
		<!-- tab -->
		<van-tabs v-model:active="active" @change="changeTabs" swipeable>
			<van-tab v-for="item in shopClassList" :title="item.name" :key="item.id">
				<itemShop :shopInfoList="shopInfoList" v-if="shopInfoList.length"></itemShop>
				<van-empty description="暂无数据" v-else />
			</van-tab>
		</van-tabs>
		<!-- 更多分类 -->
		<div class="bg-[#fff] w-[100%] h-[70px] flex justify-between">
			<div v-for="item in classifyList" :key="item.id" class="flex flex-col items-center px-[10px]">
				<img :src="item.url" class="w-[40px] h-[40px]">
				<span class="mt-[5px]">{{ item.title }}</span>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref } from 'vue'
import { getSlideList, getShopClassList, getShopInfoList, getGoodsProductList } from '@/api/home'
import itemShop from './component/itemShop.vue';
const images = ref([])
const shopClassList = ref([])
const active = ref(0)
const shopInfoList = ref([])
const classifyList = ref([])

// 获取轮播图列表
const loadGetSlideList = async () => {
	const res = await getSlideList()
	images.value = res.data
	console.log(images.value)
}
// 获取分类列表
const loadGetClassList = async () => {
	const res = await getShopClassList()
	shopClassList.value = res.data || []
}
// 获取商品信息列表
const loadGetShopInfoList = async (type) => {
	const res = await getShopInfoList({ type })
	shopInfoList.value = res.data || []
}

//获取商品展示数据
const loadGetGoodsProduct = async () => {
	const res = await getGoodsProductList()
	classifyList.value = res.data
}
loadGetSlideList()
loadGetClassList()
loadGetShopInfoList()
loadGetGoodsProduct()


// 切换tab
const changeTabs = (type) => {
	loadGetShopInfoList(type + 1)
}
</script>
<style scoped lang="scss"></style>
